<script setup>
import { User } from '@element-plus/icons-vue'
const tabList = ref([
    {
        id: 1,
        name: '品类交流群',
        list: [
            {
                id: 1,
                name: '鞋服箱包'
            },
            {
                id: 2,
                name: '消费电子'
            },
            {
                id: 3,
                name: '妆容&饰品'
            },
            {
                id: 4,
                name: '家电&家具'

            }
        ]
    },
    {
        id: 2,
        name: '出海国别',
        list: [
            {
                id: 1,
                name: '出海美国'
            },
            {
                id: 2,
                name: '出海日本'
            },
            {
                id: 3,
                name: '出海越南'
            },
            {
                id: 4,
                name: '出海印尼'

            }
        ]
    },
    {
        id: 3,
        name: '出海渠道',
        list: [
            {
                id: 1,
                name: 'Tiktok电商'
            },
            {
                id: 2,
                name: '外贸转内贸'
            },
            {
                id: 3,
                name: 'SHEIN'
            }
        ]
    },
])
const activeTab = ref(1)
const handleTabClick = (id) => {
    activeTab.value = id
}
</script>

<template>
    <section class=" right-card-box sidebar-section bg-white rounded-lg shadow-md overflow-hidden">
        <h2
            class="sidebar-title text-lg font-semibold p-4 pt-2 pb-0 bg-primary/10 text-gray-900 flex items-center gap-2">
            <el-icon class="text-primary" color="#007bff">
                <User />
            </el-icon>
            社群
        </h2>
        <div class="tab-list px-4 mt-2">
            <div class="tab-item" :class="{ 'active': activeTab === item.id }" v-for="item in tabList" :key="item.id"
                @click="handleTabClick(item.id)">
                <span>{{ item.name }}</span>
            </div>
            <el-popover placement="left" :width="80">
                <template #reference>
                    <div class="kefu-icon"></div>
                </template>
                <img style="width:120px;height:120px;" src="@/assets/images/logo/boss_wx.png" alt="">
                <div class="kefu-text" style="text-align: center;">
                    <span>扫码添加客服微信</span>
                </div>
            </el-popover>
        </div>
        <div class="community-item-list px-4">
            <ul>
                <li v-for="item in tabList[activeTab - 1].list" :key="item.id">
                    <i class="community-icon"></i>
                    <el-popover placement="left" :width="80">
                        <template #reference>
                            <span>{{ item.name }}</span>
                        </template>
                        <img style="width:120px;height:120px;" src="@/assets/images/logo/boss_wx.png" alt="">
                        <div class="kefu-text" style="text-align: center;">
                            <span>扫码添加客服微信</span>
                        </div>
                    </el-popover>

                </li>
            </ul>
        </div>
    </section>
</template>

<style scoped></style>